<template>
  <view>
    <!-- 店铺导航style="justify-content:{{navList.length>5?'start': 'space-around'}}" style="width:{{navList.length<5? '140.5rpx':'175.5rpx'}}" -->
    <view class="shopNav">
      <view v-for="(item, index) in navList" :key="index">
        <view class="shopNav-item" @tap.stop="handleTap" :data-index="index"
          :style="'width:' + ((navList.length%5 === 0 || navList.length > 8)? '140.5rpx':'175.5rpx')">
          <image v-if="item.navIcon" class="shopNav-item__image" :src="item.navIcon" :lazy-load="true"></image>
          <view class="shopNav-item__text" :style="'color:' + item.fontColor">{{item.navName}}</view>
          <button open-type="contact" class="contact-style" v-if="item.type===0&&item.id===8"></button>
        </view>
      </view>
    </view>
    <auth :authType="authType" @authClick="authClick" @cancel="cancel"></auth>
    <!-- 骨架屏，体验有问题，暂时注释 -->
    <!-- <view class="shopNav">
  <view wx:for="{{navList}}" wx:key="id">
    <view class="shopNav-item" catch:tap="handleTap" data-index="{{index}}" style="width:{{(navList.length%5 === 0 || navList.length > 8)? '140.5rpx':'175.5rpx'}}">
      <skeleton class="shopNav-item" loaded="{{item.loaded}}" skeletonKey="{{item.navIcon}}" width="{{(navList.length%5 === 0 || navList.length > 8)? '140.5rpx':'175.5rpx'}}" height=" 185rpx">
        <image bindload="onImageLoad" data-index="{{index}}" data-key="{{item.navIcon}}" slot="img" wx:if="{{item.navIcon}}" class="shopNav-item__image" src="{{item.navIcon}}" lazy-load="{{true}}" />
        <view slot="content" class="shopNav-item__text" style="color:{{item.fontColor}}">
          {{item.navName}}
        </view>
        <button open-type="contact" class="contact-style" wx:if="{{item.type===0&&item.id===8}}"></button>
      </skeleton>
    </view>
  </view>
</view> -->
  </view>
</template>

<script lang=ts>
  import {
    Component,
    Vue,
    Prop
  } from 'vue-property-decorator'
  import {
    navtofun
  } from "@/utils/navtofun";
  import {
    getAggregate
  } from "@/api/modules/userCenter";

  @Component({})
  export default class ShopNav extends Vue {
    @Prop({
      type: Array
    })
    navList: Array < any >

    authType: Boolean = false

    getAllUserCenterData: any = {};


    /**
     * 导航点击
     */
    async handleTap(e) {
      const getAllUserCenterData = await getAggregate();
      const index = e.currentTarget.dataset.index;
      const {
        linkUrl,
        append,
        id,
        type,
        linkName
      } = this.navList[index];
      const itemLink = {
        type: type,
        url: linkUrl,
        append: append,
        id: id,
        name: linkName,
      };
      // 积分商城开通
      if (itemLink.url === "/pages/integralShop/integralShop") {
        const shopOpen = getAllUserCenterData.shopFunctionInfoVo.shop;
        if (!shopOpen) {
          uni.showToast({
            title: "积分商城暂未开放",
            icon: "none",
          });
          return;
        }
      }

      const userInfo = this.$store.state.userStore.userInfo;
      if (!userInfo.whetherAuthorization) {
        this.authType = true
        return;
      }
      if (!itemLink.id) {
        return;
      }
      if (itemLink && itemLink.append === "mall" && itemLink.type === 2) {
        uni.setStorageSync("goMallItemLink", itemLink);
      }

      navtofun(itemLink, this);
      const buttomList = this.$store.state.settingStore.tabBar.list;
      const jumpToButtom = buttomList.filter(item => {
        return item.linkName === itemLink.name;
      });
      if (jumpToButtom.length > 0) {
        this.$emit("AssembleReload", {}, {});
      }
    }
    authClick(){
      this.authType=false
    }
    cancel(){
      this.authType=false
    }
  }
</script>

<style lang="scss" scoped>
  @include b(shopNav) {
    margin: 20rpx 0;
    background: #fff;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    padding: 6rpx 20rpx;
  }

  @include b(shopNav-item) {
    position: relative;
    text-align: center;
    // width: 167.5rpx;
    // height: 187.5rpx;
    width: 140.5rpx;
    height: 185rpx;
    padding-top: 22rpx;

    @include e(image) {
      // margin-top: 4rpx;
      // width: 75%;
      // height: 75%;
      width: 100rpx;
      height: 100rpx;
    }

    @include e(text) {
      margin-top: 8rpx;
      font-size: 24rpx;
      color: #000000;
    }
  }

  @include b(contact-style) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
  }
</style>